<template>
  <div class='contain'>
    <div class="userInfo">
      <div class="names">
        <img src="../assets/img/user.png" alt="">
        <div class="name">{{userInfo.nickName}} <span>Lv{{userInfo.gradeId}}</span></div>
      </div>
      <div>
        <div class="phone">
          <span>手机号：{{userInfo.phone}}</span>
          <span>微信号：{{userInfo.wechatNumber}}</span>
        </div>
        <!-- <div class="yaoqing">邀请码：abc123</div> -->
      </div>
    </div>
    <div class="navList">
      <router-link tag="div" to="/progress" class="nav">
        <img src="../assets/img/审核 (1).png" alt="">
          <p>审核 </p>
      </router-link>
      <router-link tag='div' to="/update" class="nav">
        <img src="../assets/img/升级.png" alt="">
          <p>升级 </p>
      </router-link>
      <router-link tag='div' to="/agent" class="nav">
        <img src="../assets/img/招商代理 (1).png" alt="">
          <p>代人注册 </p>
      </router-link>
      <router-link tag='div' to="/inviation"  class="nav">
        <img src="../assets/img/邀请好友.png" alt="">
          <p>邀请 </p>
      </router-link>
      <router-link tag='div' to="/friend" class="nav">
        <img src="../assets/img/好友.png" alt="">
          <p>好友 </p>
      </router-link>
      <router-link tag="div" to="/course" class="nav">
        <img src="../assets/img//教程1.png" alt="">
          <p>教程 </p>
      </router-link>
      <router-link tag="div" to="/examine" class="nav">
        <img src="../assets/img/进度1.png" alt="">
          <p>审核进度 </p>
      </router-link>
    </div>
    <div class="bot">
      <p>客服QQ：12345678</p>
    </div>
  </div>
</template>

<script>
import { Indicator, Toast } from 'mint-ui'
export default {
  data () {
    return {
      userInfo: ''
    }
  },
  mounted () {
    Indicator.open('加载中...')
    this.getInfo()
  },
  methods: {
    async getInfo () {
      let that = this
      let res = await that.$api({
        method: 'post',
        url: '/app/user/selectActiveUser'
      })
      try {
        if (res.success) {
          Indicator.close()
          this.userInfo = res.data
        } else {
          Toast(res.msg)
        }
      } catch (error) {
        console.log(error)
        Indicator.close()
      }
    }
  }
}
</script>

<style scoped lang='less'>
.contain{
  height: 100vh;
  background: #fff;
  .userInfo{
    background: #77A9FD;
    text-align: center;
    padding: .2rem;
    .names{
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    img{
      width: 0.4rem;
      height: 0.4rem;
      margin-bottom: .2rem;
    }
    .name{
      font-size: .16rem;
      color: #fff;
    }
    .phone,.yaoqing{
      font-size: .12rem;
      color: #fff;
      margin-top: .2rem;
      span{
        display: inline-block;
        margin-left: .2rem;
      }
    }
  }
  .navList{
    display: flex;
    flex-wrap: wrap;
    .nav{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 33.3%;
      height: 1.2rem;
      border-right: 1px solid #eee;
      border-bottom: 1px solid #eee;
      img{
        width: 0.32rem;
        height: 0.32em;
      }
      p{
        margin-top: .2rem;
        font-size: .14rem;
      }
    }
  }
  .bot{
    margin: .4rem auto 0;
    position: relative;
    width: 70%;
    height: .01rem;
    background: #eee;
    font-size: .14rem;
    color: #666;
    p{
      position: absolute;
      top: -.1rem;
      left: 30%;
      background: #fff;

    }
  }
}

</style>
